<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen" />


    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-1.8.3.min.js"></script>

    <!-- 添加弹出框依赖 -->
    <script type="text/javascript"
            src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <link rel="stylesheet" href="resources/widget/dialog/jquery-ui.min.css" type="text/css"
          media="screen" />

    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <!-- 百度地图js -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=E9yxrNjzVKserxDIAEHkTlViMMm7AiPH"></script>

    <script>
        $(function(){
           //页面加载后触发
           $.ajax({
               url: "/system/citylistjson",
               dataType: "json",
               success: function(data){
                   var html = "<option>--请选择--</option>";
                   for(var i = 0; i < data.length; i++){
                        html += "<option value='" + data[i].id + "'>" + data[i].cityName + "</option>";
                   }
                   $("#cid").html(html);
               }
           });

        });

        /**
         * 打开地图弹出框
         */
        function openMap(){

            //初始化地图
            initMap();

            $("#map_dialog").dialog({
                title: "百度地图",
                width: 800,
                height: 600,
                modal: true
            });
        }

        /**
         * 初始化百度地图
         */
        function initMap(){
            var map = new BMap.Map("container");
            //开启滚轮缩放
            map.enableScrollWheelZoom(true);

            //获得当前的城市名称
            var cityName = $("#cid option:selected").text();
            map.centerAndZoom(cityName, 12);

            //逆地址解析对象
            var geoc = new BMap.Geocoder();

            //设置监听事件
            map.addEventListener("click", function(e){

                //设值
                $("#lon").val(e.point.lng);
                $("#lat").val(e.point.lat);

                //清理标注
                map.clearOverlays();

                var marker = new BMap.Marker(e.point);        // 创建标注
                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                map.addOverlay(marker); //将标注添加到地图

                //逆地址解析
                geoc.getLocation(e.point, function(rs){
                    var addComp = rs.addressComponents;
                    var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                    $("#address").val(address);
                });
            });
        }
    </script>

</head>
<body>
<div id="main-content">
    <div class="content-box">
        <div class="content-box-content">
            <div class="tab-content default-tab" id="tab2">
                <form action="/system/hotalinsert" method="post" enctype="multipart/form-data">
                    <fieldset>
                        <!-- 酒店标题 -->
                        <p>
                            <label>酒店标题</label> <input
                                class="text-input small-input" type="text"
                                name="hotalName" />
                        </p>

                        <!-- 上传 -->
                        <p>
                            <label>图片上传</label> <input
                                class="text-input small-input" type="file"
                                name="file" />
                        </p>

                        <!-- 关键词 -->
                        <p>
                            <label>关键词</label> <input
                                class="text-input medium-input datepicker" type="text"
                                name="keyword" />
                        </p>

                        <!-- 城市选择 -->
                        <p>
                            <label>所在城市</label>
                            <select id="cid" name="cid" class="small-input">

                            </select>
                        </p>

                        <p>
                            <label>行政区域</label> <input
                                class="text-input small-input" type="text"
                                name="reg" />
                        </p>

                        <!-- 百度地图 -->
                        <p>
                            <button type="button" class="mybutton" onclick="openMap();">打开地图</button>
                        </p>


                        <!-- 经纬度 -->
                        <p>
                            <label>酒店经度</label> <input id="lon"
                                class="text-input small-input" type="text"
                                name="lon" />
                        </p>
                        <p>
                            <label>酒店纬度</label> <input id="lat"
                                class="text-input small-input" type="text"
                                name="lat" />
                        </p>

                        <p>
                            <label>地址</label> <input id="address"
                                class="text-input small-input" type="text"
                                name="address" />
                        </p>

                        <!-- 星级 -->
                        <p>
                            <label>酒店星级</label> <input
                                class="text-input small-input" type="text"
                                name="star" />
                        </p>

                        <!-- 品牌 -->
                        <p>
                            <label>酒店品牌</label> <input
                                class="text-input small-input" type="text"
                                name="brand" />
                        </p>

                        <!-- 酒店类型 -->
                        <p>
                            <label>酒店类型</label>
                            <select name="type" class="small-input">
                                <option value="1">星级酒店</option>
                                <option value="2">商务酒店</option>
                                <option value="3">快捷酒店</option>
                                <option value="4">主题酒店</option>
                            </select>
                        </p>

                        <!-- 开业时间 -->
                        <p>
                            <label>开业时间</label> <input
                                class="text-input small-input" type="date"
                                name="openTime" />
                        </p>

                        <!-- 酒店描述 -->
                        <p>
                            <label>描述</label>
                            <textarea class="text-input textarea wysiwyg" id="hotalInfo"
                                      name="hotalInfo" cols="79" rows="15"></textarea>
                        </p>

                        <p>
                            <input class="mybutton" type="submit" value="提交" />
                        </p>
                    </fieldset>
                    <div class="clear"></div>
                    <!-- End .clear -->
                </form>
            </div>
            <!-- End #tab2 -->
        </div>
        <!-- End .content-box-content -->
    </div>
</div>


<!-- 弹出框内容 -->
<div id="map_dialog" style="display: none">
    <!-- 百度地图容器 -->
    <div id="container"></div>
</div>


<!-- End #main-content -->
</body>
</html>